<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>光之国</title>
        <script type="text/javascript" src="/ultraman-web/js/axios-0.21.0.js"></script>
        <script type="text/javascript" src="/ultraman-web/js/vue-2.6.12.js"></script>
        <script type="text/javascript" src="/ultraman-web/js/vue-router-3.4.9.js"></script>
        <script type="text/javascript" src="/ultraman-web/js/qs-6.9.4.js"></script>
    </head>
    <body>
        <div id="app">
            <table align="center">
                <tr>
                    <td>
                        <router-link to="/ultraman/show"><button>查询</button></router-link>
                        <router-link to="/ultraman/insertUltraman"><button>添加</button></router-link>
                        <hr>
                        <router-view></router-view>
                    </td>
                </tr>
            </table>
        </div>
        <template id="ultraman-table">
            <div>
            <table border="1" cellspacing="0" align="center">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>名字</th>
                    <th>身高</th>
                    <th>体重</th>
                    <th>速度</th>
                    <th>生命力</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="u in ultramen" :key="u.ultramanId">
                    <td>{{u.ultramanId}}</td>
                    <td>{{u.ultramanName}}</td>
                    <td>{{u.height}}</td>
                    <td>{{u.weight}}</td>
                    <td>{{u.fly}}</td>
                    <td>{{u.life}}</td>
                    <td>{{u.description}}</td>
                    <td>
                        <button @click="deleteUltraman(u.ultramanId)">删除</button>
                        <!-- 动态生成地址并拼接上查询参数-->
                        <router-link :to="{path:'/ultraman/updateUltraman',query:{id:u.ultramanId}}"><button>更新</button></router-link>
                    </td>
                </tr>
                </tbody>
            </table>
            <table align="center">
                <tr>
                    <td>
                        <p>
                            <a href="" v-for="page in pages" :key="page" @click.prevent="handleAClick(page)">
                                <button style="margin: 0 0px">
                                    {{page}}
                                </button>
                            </a>
                        </p>
                    </td>
                </tr>
            </table>
            </div>
        </template>
        <!--添加商品界面-->
        <template id="add-form">
            <form action="" @submit.prevent="add">
                名字: <input type="text" v-model="ultraman.ultramanId"> <br>
                身高： <input type="text" v-model="ultraman.ultramanName"> <br>
                体重: <input type="text" v-model="ultraman.height"> <br>
                速度: <input type="text" v-model="ultraman.weight"> <br>
                生命力: <input type="text" v-model="ultraman.fly"> <br>
                描述: <input type="text" v-model="ultraman.description"> <br>
                <input type="submit" value="添加">
            </form>
        </template>
        <template id="update-form">
            <form action="" @submit.prevent="update">
                <input type="hidden" v-model="ultraman.ultramanId">
                名字: <input type="text" v-model="ultraman.ultramanId"> <br>
                身高： <input type="text" v-model="ultraman.ultramanName"> <br>
                体重: <input type="text" v-model="ultraman.height"> <br>
                速度: <input type="text" v-model="ultraman.weight"> <br>
                生命力: <input type="text" v-model="ultraman.fly"> <br>
                描述: <input type="text" v-model="ultraman.description"> <br>
                <input type="submit" value="更新">
            </form>
        </template>
        <script>
            //修改奥特曼信息
            const updateForm = {
                template:"#update-form",
                data(){
                    return{
                        ultraman:{}
                    }
                },
                created() {
                    axios.get("/ultraman-web/ultraman/showOne",{
                        params:{
                            id:this.$route.query.id
                        }
                    }).then(resp=>{
                        console.log(resp);
                        this.ultraman = resp.data.ultraman;
                    }).catch((error)=>{//处理异常
                        console.log(error);
                    })
                },
                methods:{
                    update(){
                        axios.post("/ultraman-web/ultraman/updateUltraman", Qs.stringify({ultraman:this.ultraman},{allowDots:true}))
                        .then(resp=>{
                            console.log(resp);
                            if(resp.data.status == "success"){
                                alert("更新成功");
                                this.$router.push("/ultraman/show");
                            }else{
                                alert("更新失败");
                            }
                        }).catch(error=>{
                            console.log(error);
                        })
                    }
                }
            }
            //添加奥特曼
            const addForm = {
                template: "#add-form",
                data(){
                    return{
                        ultraman:{}
                    }
                },
                methods: {
                    add(){
                        axios.post("/ultraman-web/ultraman/insertUltraman", Qs.stringify({ultraman:this.ultraman},{allowDots:true}))
                        .then(resp=>{
                            console.log(resp);
                            if(resp.data.status == "success"){
                                console.log("进入方法中");
                                alert("添加成功");
                                this.$router.push("/ultraman/show");
                            }else{
                                alert("添加失败");
                            }
                        }).catch((error)=>{//处理异常
                            console.log(error);
                        })
                    }
                }
            }
            const ultramanTable = {
                template:"#ultraman-table",
                data(){
                    return{
                        ultramen:[],
                        pages:[]
                    }
                },
                created() {
                    this.handleAClick(1);
                },
                methods:{
                    //展示所有奥特曼
                    handleAClick(i){
                        console.log("进入展示方法中");
                        axios.get("/ultraman-web/ultraman/show",{
                            params:{
                                pageNum:i,
                                pageSize:3
                            }
                        }).then(resp=>{
                            let data = resp.data;
                            console.log(data);
                            this.ultramen = data.ultramen;
                            this.pages = data.pages;
                        }).catch((error)=>{//处理异常
                            console.log(error);
                        })
                    },
                    //删除奥特曼
                    deleteUltraman: function (id) {
                        let isDelete = confirm("确定删除吗？");
                        if(!isDelete){
                            return;
                        }
                        axios.get("/ultraman-web/ultraman/deleteUltraman",{
                            params: {
                                id:id
                            }
                        }).then(resp=>{
                            console.log(resp);
                            if (resp.data.status == "success"){
                                alert("删除成功");
                                this.handleAClick(1);
                            }else{
                                alert("删除失败");
                            }
                        }).catch((error)=>{//处理异常
                            console.log(error);
                        })
                    }
                }
            }
            //定义路由规则
            const router = new VueRouter({
                routes:[
                    {path:"/ultraman/show", component:ultramanTable},
                    {path:"/ultraman/insertUltraman", component: addForm},
                    {path:"/ultraman/updateUltraman", component: updateForm}
                ]
            })
            const vm = new Vue({
                el:"#app",
                router
            })
        </script>
    </body>
</html>